<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- 引入 jQuery Mobile 样式 -->
    <link
      rel="stylesheet"
      href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
    />

    <!-- 引入 jQuery 库 -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet" />

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.7.6/dist/layui.js"></script>
  </head>
  <style>
    body {
      position: relative;
    }
    #footer {
      display: flex;
      justify-content: space-around;
      padding: 10px 0px 10px 0px;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      border-radius: 15px;
      margin-top: 270px;
      text-align: center;
    }
  </style>
  <body>
    <div class="layui-container-fluid">
      <!-- 常规布局（以中型屏幕桌面为例）： -->
      <div class="layui-row">
        <div class="layui-col-xs2">
          <img
            src="https://gw.alicdn.com/tfs/TB1mKkzl9zqK1RjSZFpXXakSXXa-50-50.svg"
            width="21px"
            height="21px"
            alt=""
          />
          郑州
        </div>
        <!-- 正在热映 -->
        <div class="layui-col-xs2 layui-col-xs-offset5">
          <span id="well_received">正在热映</span>
        </div>
        <div class="layui-col-xs2 layui-col-xs-offset1" style="color: #ccc">
          即将上映
        </div>
      </div>
    </div>

    <div id="content" class="layui-container" style="padding: 15px"></div>
    <!-- 底部导航 -->
    <div id="footer" class="layui-container-fluid">
      <!-- 常规布局（以中型屏幕桌面为例）： -->

      <div class="layui-col-xs2">
        <img
          src="http://gw.alicdn.com/imgextra/i4/O1CN01N64HFT1fr4MYeK96r_!!6000000004059-2-tps-81-81.png"
          width="21px"
          height="21px"
          alt=""
        />
        <p>首页</p>
      </div>
      <!-- 正在热映 -->
      <div class="layui-col-xs2">
        <img
          src="http://gw.alicdn.com/imgextra/i1/O1CN018IF8hR1sUFdSBCMcO_!!6000000005769-2-tps-81-81.png"
          width="21px"
          height="21px"
          alt=""
        />
        <p>影院</p>
      </div>
      <div class="layui-col-xs2">
        <img
          src="http://gw.alicdn.com/imgextra/i2/O1CN01en34Be1cfff1oFJ2U_!!6000000003628-2-tps-81-81.png"
          width="21px"
          height="21px"
          alt=""
        />
        <p>我的</p>
      </div>
    </div>
  </body>
  <script>
    $(function () {
      //页面加载调用
      w_rec();
      //获取正在热映，并添加事件
      $("#well_received").on("tap", w_rec);
    });

    // 点击正在热映
    function w_rec() {
      //修改字体样式
      $("#well_received").css({
        fontWeight: 600,
      });
      // layui.flow
      layui.use("flow", function () {
        var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
        var flow = layui.flow;
        flow.load({
          elem: "#content", //指定列表容器
          done: function (page, next) {
            //到达临界点（默认滚动触发），触发下一页
            var lis = [];
            //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
            $.get(
              "https://liu.zzgoodqc.cn/movie/list?page=" + page,
              function (res) {
                //假设你的列表返回在data集合中
                layui.each(res.coming, function (index, item) {
                  lis.push(`
                  <div class="layui-row" style="margin-bottom: 20px">
                    <div class="layui-col-xs2">
                    <img
                        src="${item.img}"
                        width="76px"
                        height="105px"
                        alt=""
                    />
                    </div>
                    <div
                    class="layui-col-xs6 layui-col-xs-offset1"
                    style="margin-bottom: 5px; height: 15px"
                    >
                    ${item.nm}
                    </div>
                    <div class="layui-col-xs4 layui-col-xs-offset1">${
                      item.sc == 0
                        ? "暂无评分"
                        : `淘票票评分为<span style="color:#FFB800">  ${item.sc}</span>`
                    }</div>
                    <!-- 购票 -->
                    <div
                    onclick="TicketPurchase(${item.id})"
                    class="layui-col-xs3 layui-col-xs-offset2 layui-btn layui-btn-radius layui-btn-primary layui-btn-sm"
                    style="background-color: #fb54aa; color: #fff; height: 27px"
                    >
                    购 票
                    </div>
                    <div
                    class="layui-col-xs4 layui-col-xs-offset1"
                    style="margin-bottom: 5px; height: 15px"
                    >
                    导演：无
                    </div>
                    <!-- 特惠 -->
                    <div class="layui-col-xs1 layui-col-xs-offset3" style="color: #ccc">
                    特惠
                    </div>

                    <div
                    class="layui-col-xs8 layui-col-xs-offset1"
                    style="margin-bottom: 5px; height: 17px;overflow:hidden;"
                    >
                    主演：${item.star}
                    </div>
                    <div
                    class="layui-col-xs6 layui-col-xs-offset1"
                    style="margin-bottom: 5px; height: 15px"
                    >
                    ${item.showInfo ? `${item.showInfo}` : "今天暂无场次"}
                    </div>
                </div>
                  `);
                });
                //声明页数
                pages = 4;
                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                next(lis.join(""), page < pages);
              }
            );
          },
        });
      });
    }
    // 点击购票
    function TicketPurchase(id) {
      //将id存入本地
      localStorage.setItem("id", JSON.parse(id));
      //跳转页面
      window.location.href =
        "http://127.0.0.1:5500/JS/%E8%80%83%E8%AF%95/8.19%E8%80%83%E8%AF%95/index2.html";
    }
  </script>
</html>
